<template>
    <div class="tab-list">
        <div class="menu-bar">
            <div class="search-bar" v-show="open" :class="{'border':frame}">
                <slot name="searchBar">
                    <slot name="searchItem">
                        名称：<el-input type="text" placeholder="roleNameCh" class="sh search-name" v-model="search.nameCh"/>
                    </slot>
                    <div class="search-bn">
                        <el-tooltip placement="top" content="清空搜索框">
                            <el-button type="default" :icon="Refresh" @click="clearSearchParam">重置</el-button>
                        </el-tooltip>
                        <el-button type="primary" :icon="Search" @click="searchActive">搜索</el-button>
                    </div>
                </slot>
            </div>
            <div class="operation-bar" :class="{'border':frame}">
                <slot name="operationBar">
                    <div class="operation-bar-left">
                        <el-button type="default" :icon="Plus" @click="openAddFrom" class="add-bn" >{{addBnText}}</el-button>
                        <el-button type="default" :icon="Delete" @click="deleteBatch" class="batch-delete-bn">{{removeBnText}}</el-button>
                        <slot name="batchOperationItem"></slot>
                    </div>
                </slot>
                <div class="operation-bar-right">
                    <el-tooltip effect="dark" placement="top-start" content="清空选择">
                        <el-button @click="this.$emit('clear-selection')" type="default" :icon="Collection" circle/>
                    </el-tooltip>
                    <el-tooltip effect="dark" placement="top-start" content="刷新表格">
                        <el-button type="default" @click="refreshData" :icon="RefreshRight" circle/>
                    </el-tooltip>
                    <el-tooltip effect="dark" placement="top-start" :content="open?'收起':'打开搜索框'">
                        <el-button type="default" @click="toggleSearchBox" :icon="CollectionTag" circle/>
                    </el-tooltip>
                </div>
            </div>
        </div>
        <div class="list-bar">
            <slot name="dataList"></slot>
        </div>
        <div class="paging-bar" v-if="pageBar">
            <slot name="pageBar">
                <el-pagination layout="prev, pager, next,jumper,total,slot" background :total="total" :page-size="pageSize" @current-change="currentPageChange"></el-pagination>
            </slot>
        </div>
        <slot name="footer"></slot>
    </div>
</template>

<script>
    import {CollectionTag, Delete, Plus, Refresh, RefreshRight, Search,Collection} from "@element-plus/icons-vue";

    export default {
        name: "WTabList",
        emits:['clear-search','refresh-data','switch-page','search-active','delete-batch','open-add-from','clear-selection'],
        setup(props){
            return{
                Search,
                Refresh,
                RefreshRight,
                CollectionTag,
                Delete,
                Plus,
                Collection
            }
        },
        props:{
            total:{
                type: Number,
                default: 10
            },
            pageSize: {
                type: Number,
                default: 10
            },
            frame: false,//用于查看组件框架
            pageBar: {
                type: Boolean,
                default: true
            },
            addBnText:{
                type: String,
                default: '新增'
            },
            removeBnText: {
                type: String,
                default: '删除'
            }
        },
        data(){
            return{
                open: true
            }
        },
        methods:{
            clearSearchParam(){
                this.$emit('clear-search')
            },
            refreshData(){
                this.$emit('refresh-data',true)
            },
            currentPageChange(index){
                this.$emit('switch-page',index);
            },
            searchActive(){
                this.$emit('search-active');
            },
            deleteBatch(){
                this.$emit('delete-batch');
            },
            openAddFrom(){
                this.$emit('open-add-from')
            },
            toggleSearchBox(){
                this.open = !this.open;
            }
        },
    }
</script>

<style scoped>
    .add-form{
        position: absolute;
        top: 10px;
        left: 30%;
        z-index: 100;
    }
    .border{
        border: 1px solid yellowgreen;
        box-sizing: border-box;
    }
    *{
        /*border: 1px solid red;*/
    }
    .tab-list{
        background: white;
        position: relative;
    }
    .list-bar{
        margin: 5px 0;
        box-shadow: 0 0 2px lightgrey;
    }
    /*基本css框架*/
    .menu-bar{
        box-shadow: 0 0 2px #b7b7b7;
        padding: 10px 8px;
        margin: 5px 0;
        overflow: hidden;
        font-size: 14px;
    }
    .list-bar{
        margin: 5px 0;
        box-shadow: 0 0 2px lightgrey;
    }
    .paging-bar{
        overflow: hidden;
    }
    .el-pagination{
        float: right;
    }
    .sh{
        width: 140px;
    }
    .search-bar{
        padding: 10px 0;
        overflow: hidden;
        /*display: flex;*/
        /*line-height: 29px;*/
    }
    .operation-bar-left{
        float: left;
    }
    .operation-bar-right{
        padding: 0 10px;
        float: right;
    }
    .operation-bar{
        overflow: hidden;
        padding: 5px 0;
    }
    .batch-delete-bn{
        color: #ff9292;
        background-color: #ffeded;
        border-color: #ffdbdb;
    }
    .search-bn{
        display: inline-block;
        margin-left: 16px;
    }
    .add-bn{
        color: var(--el-button-hover-text-color);
        border-color: var(--el-button-hover-border-color,var(--el-button-hover-bg-color));
        background-color: var(--el-button-hover-bg-color);
        outline: 0;
    }
    .batch-delete-bn:hover,.add-bn:hover{
        opacity: 0.6;
    }

</style>
